<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合性优雅表格示例</title>
    <style>
        :root {
            --primary-color: #4f46e5;
            --hover-color: #eef2ff;
            --border-color: #e5e7eb;
            --text-color: #374151;
            --light-text: #6b7280;
            --bg-color: #f9fafb;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: #f8fafc;
            padding: 2rem;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            color: #111827;
        }
        
        /* 表格工具栏 */
        .table-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .toolbar-group {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .search-box {
            position: relative;
            min-width: 250px;
        }
        
        .search-box input {
            width: 100%;
            padding: 0.5rem 0.75rem 0.5rem 2.25rem;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            font-size: 0.875rem;
            transition: all 0.2s;
            background-color: white;
        }
        
        .search-box input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            width: 1rem;
            height: 1rem;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid var(--border-color);
            background-color: white;
            color: var(--text-color);
            gap: 0.5rem;
        }
        
        .btn:hover {
            background-color: var(--bg-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: #4338ca;
        }
        
        .btn-icon {
            width: 1rem;
            height: 1rem;
        }
        
        /* 密度切换 */
        .density-switcher {
            display: flex;
            border: 1px solid var(--border-color);
            border-radius: 0.375rem;
            overflow: hidden;
        }
        
        .density-btn {
            padding: 0.5rem 0.75rem;
            border: none;
            background-color: white;
            cursor: pointer;
            font-size: 0.8125rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-right: 1px solid var(--border-color);
        }
        
        .density-btn:last-child {
            border-right: none;
        }
        
        .density-btn.active {
            background-color: var(--primary-color);
            color: white;
        }
        
        /* 表格容器 */
        .table-container {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            border: 1px solid var(--border-color);
        }
        
        /* 表格样式 */
        .data-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.875rem;
        }
        
        .data-table thead th {
            background-color: #f9fafb;
            padding: 0.75rem 1rem;
            text-align: left;
            font-weight: 600;
            color: var(--light-text);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
        }
        
        .data-table tbody tr {
            transition: background-color 0.2s;
        }
        
        .data-table tbody tr:hover {
            background-color: var(--hover-color);
        }
        
        .data-table tbody td {
            padding: 1rem;
            border-bottom: 1px solid var(--border-color);
            vertical-align: middle;
        }
        
        .data-table tbody tr:last-child td {
            border-bottom: none;
        }
        
        /* 状态标签 */
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        
        .status-active {
            background-color: #ecfdf5;
            color: #059669;
        }
        
        .status-pending {
            background-color: #fef3c7;
            color: #d97706;
        }
        
        .status-inactive {
            background-color: #fee2e2;
            color: #dc2626;
        }
        
        /* 进度条 */
        .progress-bar {
            height: 0.5rem;
            background-color: #e5e7eb;
            border-radius: 0.25rem;
            overflow: hidden;
        }
        
        .progress-value {
            height: 100%;
            border-radius: 0.25rem;
            background-color: var(--primary-color);
        }
        
        /* 操作按钮 */
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.75rem;
            height: 1.75rem;
            border-radius: 0.25rem;
            color: var(--light-text);
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            background: none;
        }
        
        .action-btn:hover {
            background-color: var(--bg-color);
            color: var(--primary-color);
        }
        
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border-top: 1px solid var(--border-color);
        }
        
        .pagination-info {
            font-size: 0.875rem;
            color: var(--light-text);
        }
        
        .pagination-controls {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.25rem;
            border: 1px solid var(--border-color);
            background-color: white;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-btn:hover {
            background-color: var(--bg-color);
        }
        
        .page-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        /* 空状态 */
        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: var(--light-text);
        }
        
        .empty-icon {
            width: 3rem;
            height: 3rem;
            margin-bottom: 1rem;
            color: #d1d5db;
        }
        
        .empty-title {
            font-size: 1rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .table-container {
                border-radius: 0;
                border-left: none;
                border-right: none;
            }
            
            .data-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .toolbar-group {
                width: 100%;
            }
            
            .search-box {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>员工数据表</h1>
        
        <div class="table-toolbar">
            <div class="toolbar-group">
                <div class="search-box">
                    <svg class="search-icon" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                    </svg>
                    <input type="text" placeholder="搜索员工...">
                </div>
                
                <div class="density-switcher">
                    <button class="density-btn active" data-density="comfortable">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M4 13h6v-2H4v2zm0-4h6V7H4v2zm0 8h6v-2H4v2zm10 0h6v-2h-6v2zm0-10v2h6V7h-6zm0 6h6v-2h-6v2z"/>
                        </svg>
                        适中
                    </button>
                    <button class="density-btn" data-density="compact">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M4 12h16v2H4z"/>
                        </svg>
                        紧凑
                    </button>
                    <button class="density-btn" data-density="spacious">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M4 13h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V7H4v2z"/>
                        </svg>
                        宽松
                    </button>
                </div>
            </div>
            
            <div class="toolbar-group">
                <button class="btn">
                    <svg class="btn-icon" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    导出
                </button>
                <button class="btn btn-primary">
                    <svg class="btn-icon" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                    </svg>
                    添加员工
                </button>
            </div>
        </div>
        
        <div class="table-container">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>职位</th>
                        <th>部门</th>
                        <th>状态</th>
                        <th>入职日期</th>
                        <th>进度</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="font-medium">张三</div>
                            <div class="text-sm text-light">zhang.san@example.com</div>
                        </td>
                        <td>前端工程师</td>
                        <td>技术部</td>
                        <td><span class="status-badge status-active">在职</span></td>
                        <td>2020-05-15</td>
                        <td>
                            <div class="progress-bar">
                                <div class="progress-value" style="width: 85%"></div>
                            </div>
                            <div class="text-xs text-light mt-1">85%</div>
                        </td>
                        <td>
                            <div class="flex gap-1">
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="font-medium">李四</div>
                            <div class="text-sm text-light">li.si@example.com</div>
                        </td>
                        <td>产品经理</td>
                        <td>产品部</td>
                        <td><span class="status-badge status-active">在职</span></td>
                        <td>2019-11-20</td>
                        <td>
                            <div class="progress-bar">
                                <div class="progress-value" style="width: 92%"></div>
                            </div>
                            <div class="text-xs text-light mt-1">92%</div>
                        </td>
                        <td>
                            <div class="flex gap-1">
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="font-medium">王五</div>
                            <div class="text-sm text-light">wang.wu@example.com</div>
                        </td>
                        <td>UI设计师</td>
                        <td>设计部</td>
                        <td><span class="status-badge status-pending">试用期</span></td>
                        <td>2022-03-10</td>
                        <td>
                            <div class="progress-bar">
                                <div class="progress-value" style="width: 65%"></div>
                            </div>
                            <div class="text-xs text-light mt-1">65%</div>
                        </td>
                        <td>
                            <div class="flex gap-1">
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="font-medium">赵六</div>
                            <div class="text-sm text-light">zhao.liu@example.com</div>
                        </td>
                        <td>后端工程师</td>
                        <td>技术部</td>
                        <td><span class="status-badge status-inactive">离职</span></td>
                        <td>2018-09-05</td>
                        <td>
                            <div class="progress-bar">
                                <div class="progress-value" style="width: 100%"></div>
                            </div>
                            <div class="text-xs text-light mt-1">100%</div>
                        </td>
                        <td>
                            <div class="flex gap-1">
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="font-medium">钱七</div>
                            <div class="text-sm text-light">qian.qi@example.com</div>
                        </td>
                        <td>市场总监</td>
                        <td>市场部</td>
                        <td><span class="status-badge status-active">在职</span></td>
                        <td>2017-06-18</td>
                        <td>
                            <div class="progress-bar">
                                <div class="progress-value" style="width: 78%"></div>
                            </div>
                            <div class="text-xs text-light mt-1">78%</div>
                        </td>
                        <td>
                            <div class="flex gap-1">
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                    </svg>
                                </button>
                                <button class="action-btn">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                    </svg>
                                </button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            
            <div class="pagination">
                <div class="pagination-info">
                    显示 1 到 5 条，共 12 条记录
                </div>
                <div class="pagination-controls">
                    <button class="page-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <button class="page-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 密度切换功能
        document.querySelectorAll('.density-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除所有active类
                document.querySelectorAll('.density-btn').forEach(b => {
                    b.classList.remove('active');
                });
                
                // 添加当前active类
                this.classList.add('active');
                
                // 获取表格并更新密度类
                const table = document.querySelector('.data-table');
                table.classList.remove(
                    'density-comfortable',
                    'density-compact',
                    'density-spacious'
                );
                table.classList.add(`density-${this.dataset.density}`);
                
                // 更新单元格padding
                const cells = document.querySelectorAll('.data-table th, .data-table td');
                cells.forEach(cell => {
                    cell.classList.remove(
                        'density-comfortable',
                        'density-compact',
                        'density-spacious'
                    );
                    cell.classList.add(`density-${this.dataset.density}`);
                });
            });
        });
        
        // 行点击效果
        const rows = document.querySelectorAll('.data-table tbody tr');
        rows.forEach(row => {
            row.addEventListener('click', function(e) {
                // 如果不是点击操作按钮
                if (!e.target.closest('.action-btn')) {
                    rows.forEach(r => r.classList.remove('selected'));
                    this.classList.add('selected');
                }
            });
        });
        
        // 分页按钮点击效果
        const pageBtns = document.querySelectorAll('.page-btn:not(:first-child):not(:last-child)');
        pageBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.page-btn').forEach(b => {
                    b.classList.remove('active');
                });
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>
